import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Rx';
@Component({
  selector: 'app-todo-header',
  templateUrl: './todo-header.component.html',
  styleUrls: ['./todo-header.component.css']
})
export class TodoHeaderComponent implements OnInit {
  desc: string = '';
  @Input() placeholder: string ="What needs to be done?";
  @Input() delay: number = 300;
  @Output() textChanges = new EventEmitter<string>();

  @Output() onEnterUp = new EventEmitter<boolean>();
  constructor(private elementRef: ElementRef) { 
    const event$ = Observable.fromEvent(elementRef.nativeElement, 'keyup')
      .map( () => this.desc )
      .debounceTime(this.delay)
      .distinctUntilChanged();
    event$.subscribe(input=> this.textChanges.emit(input));
  }

  ngOnInit() {
  }
  enterup(){
    this.onEnterUp.emit(true);
    this.desc = "";
  }

}
